<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/11/9 0009
  Time: 14:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>收银开单</title>
  <link href="/admin/css/bootstrap.css" rel="stylesheet">
  <script src="/admin/js/jquery.min.js" type="text/javascript"></script>
  <script src="/admin/js/layer/layer.js" type="text/javascript"></script>
  <script src="/resource/js/bootstrap.js" type="text/javascript"></script>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
      font-family: "微软雅黑";
      font-size: 12px;
    }

    a{
      color: #27B5F3;
      font-size: 14px;
      text-decoration: none;
    }
    a:hover{
      text-decoration: none;
      color: #27B5F3;
    }
    .top-active{
      background-color: #27B5F3;
      color: #FFF;
      text-align: center;
      width: 100px;
      display: inline-block;
      padding:5px 0;
    }
    .topTittleLine {
      height: 1px;
      width: 100%;
      background-color: #27B5F3;
      margin-bottom: 20px;
    }
    .searchInput{
      height: 24px;
      margin-left: 2%;
      border:1px solid #F3531C;
    }
    .search{
      height: 24px;
      line-height: 24px;
      display: inline-block;
    }
    .tdHead{
      width: 10%;
      text-align: center;
      height: 24px;
      border:1px solid #ccc;
      background: #83D8FD;
    }
    .tdBody{
      width:15%;
      height: 24px;
      text-align: center;
      border:1px solid #ccc;
    }
    .boxLeft{
      border: 1px solid #83D8FD;
      width: 20%;
      display: inline-block;
      margin-left: 2%;
      float: left;
      margin-top: 20px;
      height: 400px;
    }
    .boxRight{
      border: 1px solid #83D8FD;
      width: 74%;
      height: 400px;
      display: inline-block;
      float: left;
      margin-top: 20px;
      margin-left: 1%;
    }
    .foot{
      width: 74%;
      margin-left: 23%;
      margin-top: 20px;
      border: 1px solid #83D8FD;
      height: 40px;
      line-height: 40px;
      float: left;
    }
    .nav-tabs{
      margin-top: 20px;
      border-bottom: 1px solid #83D8FD;
    }
    .nav > li > a{
      padding: 2px 0px;
      width: 100px;
      text-align: center;
      background: #83D8FD;
      color: #FFF;
    }
    .nav > li > a:hover, .nav > li > a:focus{
      background: #83D8FD;
    }
    .nav-tabs > li > a{
      margin: 0;
    }
    .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{
      color: #83D8FD;;
      border: 1px solid #83D8FD;
    }
    .tab-pane{
      padding-top: 20px;
    }
    .boxTable{
      width:100%;
      margin-top: 20px;
    }
    .boxTable tr td{
      text-align: center;
      height: 24px;
      line-height: 24px;
    }
    .boxTable thead{
      background: #DDDDDD;
    }
    .boxTable tbody tr{
      border-bottom: 1px solid #CCC;
    }
    .del img{
      width: 12px;
      cursor: pointer;
    }
    select{
      border: 0;
    }
    .total{
      color: red;
    }
    .numberInput{
      height: 22px;
      width: 30px;
    }
    .unitPriceInput{
      height: 22px;
      width: 30px;
    }
    #bala2{
      display: none;
    }
    .tab-content{
      padding-top:20px;
    }
    .litHead{
      display: inline-block;
      width: 35%;
      text-align: center;
      background: #83D8FD;
    }
    .litCnt{
      display: inline-block;
      width: 60%;
      text-align: center;
    }
    .litInput{
      line-height: 20px;
      height: 20px;
      border: 0;
      outline: 0;
      width: 60%;
      padding-left: 10%;
    }
    .pay{
      display: inline-block;
      width: 10%;
      height: 24px;
      line-height: 24px;
      text-align: center;
      margin:0 5%;
      color: red;
      font-size: 20px;
    }
    .btn1{
      border: 0;
      background: #EB9418;
      color: #fff;
      padding: 5px 20px;
      margin-left: 5%;
      border-radius: 5px;
    }
    .btn2{
      border: 0;
      background: #0599DA;
      color: #fff;
      padding: 5px 20px;
      margin-left: 2%;
      border-radius: 5px;
    }
    .alert-form-cnt{
      width: 170px;
      display: inline-block;
    }
    .searchBox{
      width: 330px;
      height: 392px;
      overflow: scroll;
      border: 1px solid #999;
      display: none;
      position: absolute;
      background: #FFF;
      z-index: 999;
    }
    th{
      text-align: center;
      background: #ddd;
      padding: 2px 0;
      color: #666;
      width: 25%;
    }
    td{
      text-align: center;
      padding: 2px 0;
      border-bottom: 1px solid #CCC;
    }
    /*tr:last-child td{
      border-bottom: 0;
    }*/
    .down{
      background: #27B5F3;
      color: #FFF;
      padding: 3px 10px;
      display: inline-block;
      margin-left: 10px;
      border-radius: 5px;

      cursor: pointer;
    }
    .hid{
      display: block;
    }
  </style>
</head>
<body>
<div class="topTittle top-active">收银开单</div>
<span style="margin-left:1%"><a href="/shortcut/forCount" class="topTitlt">待结算账单</a></span>
<span style="margin-left:1%"><a href="/shortcut/closeCount" class="topTitlt">已结算账单</a></span>
<div class="topTittleLine clearfix"></div>
  <div class="row clearfix">
    <div style="display: inline-block;margin-left: 3%;">搜索会员：</div>
    <div class="alert-form-cnt" >
      <input type="text" class="form-control search" id="searchCondition" placeholder="请按姓名、手机或编号搜索">
      <table class="searchBox" cellspacing="0">
        <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>手机号</th>
          <th>客户类型</th>
        </tr>
        </thead>
        <tbody id="memberData">
        <%--<tr >
          <td>1</td>
          <td>李四</td>
          <td>1676455664</td>
          <td>会员</td>
        </tr>--%>
        </tbody>
      </table>
    </div>
    <div class="down" id="searchmember">查找</div>
    <input type="hidden" id="memberId">
  </div>


<table  style="width:95%;margin-left:2%;margin-top:30px;">
  <tr>
    <td class="tdHead">姓名</td>
    <td class="tdBody" id="memberName"></td>
    <td class="tdHead">余额</td>
    <td class="tdBody" id="memberBalance"></td>
    <td class="tdHead">会员卡号</td>
    <td class="tdBody" id="memberCard"></td>
    <td class="tdHead">客户类型</td>
    <td class="tdBody" id="memberType"></td>
  </tr>
  <tr>
    <td class="tdHead">手机号</td>
    <td class="tdBody" id="memberPhone"></td>
    <td class="tdHead">所属门店</td>
    <td class="tdBody" id="shopName"></td>
    <td class="tdHead">会员生日</td>
    <td class="tdBody" id="memberBirthday"></td>
    <td class="tdHead">客户等级</td>
    <td class="tdBody" id="memberLevel"></td>
  </tr>
</table>
<div class="boxLeft">
  <div class="tabbable" id="tabs-405809">
    <ul class="nav nav-tabs">
      <li class="active">
        <a href="#panel-407050" data-toggle="tab" class="a1">服务项目</a>
      </li>
      <li>
        <a href="#panel-596371" data-toggle="tab" class="a2">商品</a>
      </li>
    </ul>
    <div class="tab-content">
      <div id="bala1">
        <input type="text" class="searchInput" id="ItemCondition" placeholder="请按名称或类型搜索"><div class="down" id="searchItem">搜索</div>
        <table class="boxTable boxTable1 leftTable1">
          <thead>
          <tr>
            <td>项目名称</td>
            <td>项目类型</td>
          </tr>
          </thead>
          <tbody id="itemTbody">
          </tbody>
        </table>
      </div>
      <div id="bala2">
        <input type="text" class="searchInput"><div class="down" id="searchCommodity">搜索</div>
        <table class="boxTable boxTable1 leftTable2" id="commodityTable">
          <thead>
          <tr>
            <td>商品名称</td>
            <td>售价</td>
            <td>库存</td>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>面膜</td>
            <td>100</td>
            <td>100</td>
          </tr>
          <tr>
            <td>面膜</td>
            <td>100</td>
            <td>100</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<div class="boxRight">
  <div class="tab-content">
    <div class="tab-pane active" style="padding:0;" id="panel-407050">
      <table class="boxTable tab1">
        <thead>
        <tr>
          <td>项目名称</td>
          <td>项目类型</td>
          <td>卡类型</td>
          <td>次数</td>
          <td>有效期</td>
          <td style="width:150px;">售价</td>
          <td style="width:150px;">数量</td>
          <td style="width:200px;">应结金额</td>
          <td>提成人员</td>
          <td>协助人员</td>
          <td>操作</td>
        </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
    <div class="tab-pane" style="padding:0;" id="panel-596371">
      <table class="boxTable tab2">
        <thead>
        <tr>
          <td>商品名称</td>
          <td style="width:150px;">售价</td>
          <td style="width:150px;">数量</td>
          <td style="width:200px;">应结金额</td>
          <td>提成人员</td>
          <td>协助人员</td>
          <td>操作</td>
        </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </div>
</div>
<div class="foot">
  <div style="display:inline-block;width:25%;border: 1px solid #CCC;height:24px;line-height:24px;margin-left:3%;">
    <div class="litHead">单号</div>
    <div class="litCnt">3246465464</div>
  </div>
  <div style="display:inline-block;width:25%;border: 1px solid #CCC;height:24px;line-height:24px;margin-left:3%;">
    <div class="litHead">备注</div>
    <input type="text" placeholder="请输入消费备注"  class="litInput">
  </div>
  <div class="pay">$1200.00</div>
  <a class="btn1">挂单</a>
  <a class="btn2">结算</a>
</div>

<script>
    /*搜索会员*/
    $("#searchmember").click(function(){
        $("#memberData").empty();
        $.ajax({
            type: "POST",
            url: "/Shortcut/selectMemberByCondition",
            data: "searchCondition="+$.trim($("#searchCondition").val()),
            success: function(data){
                $.each(data,function (i,n) {
                    $("#memberData").append("<tr >\n" +
                        "          <td>"+i+"</td>\n" +
                        "          <td>"+n.memberName+"</td>\n" +
                        "          <td>"+n.memberPhone+"</td>\n" +
                        "          <td>"+n.memberType+"</td>\n" +
                        "          <td style='display: none'>"+n.money+"</td>\n" +
                        "          <td style='display: none'>"+n.memberNumber+"</td>\n" +
                        "          <td style='display: none'>"+n.shopName+"</td>\n" +
                        "          <td style='display: none'>"+n.birthday+"</td>\n" +
                        "          <td style='display: none'>"+n.memberLevel+"</td>\n" +
                        "          <td style='display: none'>"+n.id+"</td>\n" +
                        "        </tr>")
                });
                $(".searchBox").addClass("hid");
                $("#memberData tr").mouseover(function () {
                    $(this).css({"background": "#69CAD4"});
                });
                $("#memberData tr").mouseleave(function () {
                    $(this).css({"background": ""});
                })
                $("#memberData tr").click(function () {
                    $("#memberName").text($(this).children().eq(1).text());
                    $("#memberPhone").text($(this).children().eq(2).text());
                    $("#memberType").text($(this).children().eq(3).text());
                    $("#memberBalance").text($(this).children().eq(4).text());
                    $("#memberCard").text($(this).children().eq(5).text());
                    $("#shopName").text($(this).children().eq(6).text());
                    $("#memberBirthday").text($(this).children().eq(7).text());
                    $("#memberLevel").text($(this).children().eq(8).text());
                    $("#memberId").val($(this).children().eq(9).text());
                    $(".searchBox").removeClass("hid");
                })
            }
        });
    })

    /*搜索项目卡*/
    $("#searchItem").click(function () {
        $("#itemTbody").empty();
        var memberId = $("#memberId").val();
        var ItemCondition = $("#ItemCondition").val();
        $.ajax({
            type:"POST",
            url: "/index/searchItemByCondition.shtml",
            data:"memberId="+memberId+"&searchCondition="+ItemCondition,
            success:function (data) {
                $.each(data,function (i,n) {
                    $("#itemTbody").append(
                        "<tr><td>"+n.name+"</td><td>"+n.type+"</td></tr>"
                    )
                })
                //点击左侧，添加到右侧
                $(".leftTable1 tbody tr").click(function(){
                    var str ="<tr>"
                    str +='<td>';
                    str +=$(this).children().first().text();
                    str +='</td>';
                    str +='<td>';
                    str +=$(this).children().last().text();
                    str +='</td>';
                    str +="<td><select><option>疗程卡</option><option>2</option></select></td>"
                    str +="<td><select><option>10次</option><option>2</option></select></td>"
                    str +="<td><select><option>一个月</option><option>2</option></select></td>"
                    str +='<td class="unitPrice">100.00</td>'
                    str +='<td class="number">1</td>'
                    str +='<td class="total">100.00</td>'
                    str +='<td>张三</td>'
                    str +='<td>李四</td>'
                    str +='<td class="del"><img src="../images/del.png"></td>	'
                    str +='</tr>'
                    $(".boxTable tbody tr").css("background","#FFF")
                    $(this).css("background","#83D8FD");
                    $(".tab1 tbody").append(str)
                })
            }
        })
    });

    /*搜索商品*/
    $("#searchCommodity").click(function () {
        alert('搜索商品');
    });

    $(function(){
// 点击左侧，右侧添加一行信息-----商品
        $(".leftTable2 tbody tr").click(function(){
            var str ="<tr>"
            str +='<td>';
            str +=$(this).children().first().text();
            str +='</td>';
            str +='<td class="unitPrice">';
            str +=$(this).children().last().text();
            str +='</td>';
            str +='<td class="number">1</td>'
            str +='<td class="total">100.00</td>'
            str +='<td>张三</td>'
            str +='<td>李四</td>'
            str +='<td class="del"><img src="../images/del.png"></td>	'
            str +='</tr>'
            $(".boxTable tbody tr").css("background","#FFF")
            $(this).css("background","#83D8FD");
            $(".tab2 tbody").append(str)
        })

        $(".boxTable").on("click",".del",function(){
            $(this).parent().remove();
        })


// 文字点击变成input，且可以编辑
        $(".tab1").on("click",".number",function(){
            $(this).html('<input type="number" style="width:50px;" class="numberInput">');
            $(".numberInput").focus();
            $(".tab1").on("blur",".numberInput",function(){
                var num = $(".numberInput").val();
                $(this).parent().siblings(".total").text(num*$(this).parent().siblings(".unitPrice").text())
                $(this).parent().html(num);

            })
        })

        $(".tab1").on("click",".unitPrice",function(){
            $(this).html('<input type="number" style="width:50px;" class="unitPriceInput">');
            $(".unitPriceInput").focus();
            $(".tab1").on("blur",".unitPriceInput",function(){
                var num2 = $(".unitPriceInput").val();
                $(this).parent().siblings(".total").text(num2*$(this).parent().siblings(".number").text())
                $(this).parent().html(num2);
            })
        })

        $(".tab2").on("click",".number",function(){
            $(this).html('<input type="number" style="width:50px;" class="numberInput">');
            $(".numberInput").focus();
            $(".tab2").on("blur",".numberInput",function(){
                var num = $(".numberInput").val();
                $(this).parent().siblings(".total").text(num*$(this).parent().siblings(".unitPrice").text())
                $(this).parent().html(num);
            })
        })

        $(".tab2").on("click",".unitPrice",function(){
            $(this).html('<input type="number" style="width:50px;" class="unitPriceInput">');
            $(".unitPriceInput").focus();
            $(".tab2").on("blur",".unitPriceInput",function(){
                var num2 = $(".unitPriceInput").val();
                $(this).parent().siblings(".total").text(num2*$(this).parent().siblings(".number").text())
                $(this).parent().html(num2);
            })
        })

//左侧的tab
        $(".a2").click(function(){
            var tds = $(".tab1 tbody tr").children(".total")

            var prizes = parseInt(tds.text());
            for (var i = 0; i < tds.length; i++) {
                var sum = 0;
                sum += prizes[i];
            };
            console.log(sum)

            $("#bala1").css("display","none");
            $("#bala2").css("display","block")

        })
        $(".a1").click(function(){
            $("#bala2").css("display","none")
            $("#bala1").css("display","block")
        })

//底部总计
    })
</script>

</body>
</html>

